// 个人中心 （改为用户管理）
<template>
  <div class="user-manager-box">
    <!-- 左侧选项 -->
    <div class="user-menu">
      <aside-menu
        :list="menuList"
        :active="active"
        @select-menu="selectedMenu"
      />
    </div>
    <div class="user-data">
      <user-data ref="userData" />
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="用户管理" name="first">用户管理</el-tab-pane>
        <el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane>
        <el-tab-pane label="角色管理" name="third">角色管理</el-tab-pane>
        <el-tab-pane label="定时任务补偿" name="fourth"
          >定时任务补偿</el-tab-pane
        >
      </el-tabs>
    </div>
  </div>
</template>

<script>
import aside from '@c/aside'
import useData from './user-data'
export default {
  name: 'user-manager',
  components: {
    'aside-menu': aside,
    'user-data': useData,
  },
  data() {
    return {
      active: 'street',
      menuList: [
        {
          id: 'street',
          is_single: true,
          icon_name: '',
          index_name: '街道',
        },
        {
          id: 'community',
          is_single: true,
          icon_name: '',
          index_name: '社区',
        },
      ],
      activeName: 'first',
      oldActiveName: 'first',
    }
  },
  methods: {
    selectedMenu(val) {
      this.active = val.id
      this.$refs.userData.getListByType(this.active)
    },
    handleClick(tab) {
      // console.log(tab, event);
      if (this.oldActiveName === tab.name) {
        this.activeName = ''
        this.oldActiveName = ''
        console.log('重复点击')
        return
      }
      console.log('切换')
      this.oldActiveName = tab.name
    },
    // handleBeforeLeave(activeName, oldActiveName) {
    //   console.log(activeName, oldActiveName, '=----------');
    // },
  },
  watch: {
    // activeName(old, val) {
    //   console.log(old, val);
    // },
  },
}
</script>

<style lang="scss" scoped>
.user-manager-box {
  width: calc(100vw);
  height: calc(100vh - 60px);
  display: flex;
  .user-menu {
    width: 300px;
    height: 100%;
  }
  .user-data {
    width: calc(100vw - 300px);
    padding: 20px;
    background: #f5f8ff;
  }
}
</style>
